<template>
	<div class="ssqZst">
	<div class="maincontent ">
		<div class="kj_sort">
			<div class="menu">
				<ul id="kjmenu">
					<li class="nav1"><a href="/zoushitu" target="_parent">走势图表</a></li>
				</ul>
           	</div>
			<div class="clear"></div>
                <!--地方开奖begin-->
			<div class="list">
                <div class="left">
					<ul>
						<li><b>彩种：</b>
					        <a href="/zoushitu/ssq" class="current">双色球</a>&nbsp;
					        <a href="/zoushitu/cqssc">重庆时时彩</a>&nbsp;
					        <a href="/zoushitu/gd115">广东11选5</a>&nbsp;
					        <a href="/zoushitu/sanfencai">三分彩</a>&nbsp;
					        <a href="/zoushitu/wufencai">五分彩</a>&nbsp;
					        <a href="/zoushitu/bjlu28">北京幸运28</a>&nbsp;
					        <a href="/zoushitu/cndlu28">加拿大28</a>&nbsp;
					        <a href="/zoushitu/niuniu">欢乐牛牛</a>&nbsp;
						</li>
                  </ul>
                </div>
                <div class="clear"></div>
        	</div>
        </div>
		<div class="guide">
			<span>您当前位置：</span>
			<a href="/index.html">海豚彩票</a>
			<span>&gt;</span>
			<a href="">数据图表</a>
			<span>&gt;</span>
			<span>频道首页</span>
		</div>
		<div class="datachart">
			<div class="selectbox">
				<div class="lable">红蓝走势</div>
				<div class="select">
					<span class="option curosr" data="0">30期</span>
					<span class="option curosr" data="1">50期</span>
					<span class="option curosr" data="2">100期</span>
				</div>
			</div>
			<div class="datalistbox">
				<table>
					<tr class="title" id="menuitem">
		        		<td><strong>期号</strong></td>
		        		<td class="wdh">1</td>
		        		<td class="wdh">2</td>
		        		<td class="wdh">3</td>
		        		<td class="wdh">4</td>
		        		<td class="wdh">5</td>
		        		<td class="wdh">6</td>
		        		<td class="wdh">7</td>
		        		<td class="wdh">8</td>
		        		<td class="wdh">9</td>
		        		<td class="wdh">10</td>
		        		<td class="wdh">11</td>
		        		<td class="wdh">12</td>
		        		<td class="wdh">13</td>
		        		<td class="wdh">14</td>
		        		<td class="wdh">15</td>
		        		<td class="wdh">16</td>
		        		<td class="wdh">17</td>
		        		<td class="wdh">18</td>
		        		<td class="wdh">19</td>
		        		<td class="wdh">20</td>
		        		<td class="wdh">21</td>
		        		<td class="wdh">22</td>
		        		<td class="wdh">23</td>
		        		<td class="wdh">24</td>
		        		<td class="wdh">25</td>
		        		<td class="wdh">26</td>
		        		<td class="wdh">27</td>
		        		<td class="wdh">28</td>
		        		<td class="wdh">29</td>
		        		<td class="wdh">30</td>
		        		<td class="wdh">31</td>
		        		<td class="wdh">32</td>
		        		<td class="wdh">33</td>
		        		<td width="2" align="center" bgcolor="#ddd" class="title_red"></td>
		        		<td class="wdh">1</td>
		        		<td class="wdh">2</td>
		        		<td class="wdh">3</td>
		        		<td class="wdh">4</td>
		        		<td class="wdh">5</td>
		        		<td class="wdh">6</td>
		        		<td class="wdh">7</td>
		        		<td class="wdh">8</td>
		        		<td class="wdh">9</td>
		        		<td class="wdh">10</td>
		        		<td class="wdh">11</td>
		        		<td class="wdh">12</td>
		        		<td class="wdh">13</td>
		        		<td class="wdh">14</td>
		        		<td class="wdh">15</td>
		        		<td class="wdh">16</td>
		        	</tr>
					<tbody id="datalist" v-for="item in items">
					<tr>
						<td>{{item.sessionNo}}</td>
						<td class="redball" v-for="redItem in item.reditems" v-bind:class="ballColor(redItem)">
						    <span class="ball" v-if="redItem.indexOf('&') >= 0">{{redItem.replace("&","")}}</span>
						    <span class="ball" v-if="redItem.indexOf('&') < 0">{{redItem}}</span>
						</td>
						<td class="blueball" v-for="blueItem in item.blueitems" v-bind:class="blueBallColor(blueItem)">
						    <span class="ball" v-if="blueItem.indexOf('&') >= 0">{{blueItem.replace("&","")}}</span>
						    <span class="ball" v-if="blueItem.indexOf('&') < 0">{{blueItem}}</span>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div class="chartIntro"> 
				<span class="cfont4 intro_left">
				<strong>参数说明：</strong><br>
				  [重号] 前两期连续出现两次的号码<br><br>
				  [连号] 即相连号，中奖号码按顺序相连<br><br>
				  [边号] 也叫邻号，与上期开出的中奖号码加减余1的号码<br><br>
				  [遗漏分层]将当期遗漏按照“1-5，6-11，12-无穷大”分别用黑色、蓝色、红色标注出来<br><br>
				  [辅助线]每五期使用分隔线，使横向导航更加清晰
				</span>
				<div class="clear"></div>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
import {baseObj} from '../util/util' 
import {config} from '../util/util' 

export default {
	name: 'ssqZst',
	data () {
		return {
			query: { //查询条件对象
                type: '0'//0==30期 1=50期 2=100期
        	},
			items: []
        }
    },
    methods :{
    	ballColor:function(i){
	      if (i.indexOf('&') < 0) {
	        return "ordinary"
	      }else{
	        return "redHighlight"
	      }
	    },
	    blueBallColor:function(i){
	      if (i.indexOf('&') < 0) {
	        return "ordinary"
	      }else{
	        return "blueHighlight"
	      }
	    },
    	getTrend: function(){
    		var map = {};
		    map['type'] = this.query.type;
      		var mw=baseObj.mw(map);
    		this.$http.get('api/api/ssq_trend',{
    			params:{
    				mw: mw
    			}
    		}).then((response) => {
            console.log(response.data.code);
            var code = response.data.code;
	        if ( '200'=== code ) {
	          var result = response.data.data;
	          this.items = result.items;
	        }
     		})
    	}
    },
    watch: {
    // 如果 `query` 发生改变，这个函数就会运行.
    // 为了发现对象内部值的变化，可以在选项参数中指定 deep: true
    'query': {
      handler: function(){
        this.getTrend();
      },
      deep:true
    }
  },
  created:function() {
    this.getTrend();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@CHARSET "UTF-8";
.guide { margin: 10px 0;}
.zoushitu { border: 1px solid #E2E2E2;margin-bottom: 10px;}
.zoushitu table {width: 100%;border-spacing: 0;}
.zoushitu .caption {border-bottom: 1px solid #ba2636;background: #fcfcfc;color: #333;font-size: 14px;text-indent: 5px;line-height: 35px;text-align: left;}
.zoushitu tbody tr td {border-bottom: 1px dotted #ddd;color: #717171;padding: 5px;}
.zoushitu table tbody tr td:first-child img {width: 56px;}


.promotions img {width: 100%;}

.kj_sort {margin: 8px auto 0 auto;width: 1000px;border: 1px solid #DDE7F2;}
.kj_sort .menu {height: 30px;padding: 5px 10px 0;width: 1000px;background: #e2e2e2;}
.kj_sort .menu .nav1 {background: #f5f5f5;font-weight: bold; color: #000;}
.kj_sort .menu li {float: left;height: 30px;line-height: 30px;text-align: center;padding: 0 10px;cursor: pointer;color: #fff;}

.kj_sort .list {background: #f5f5f5;overflow: hidden;margin-top: 10px;}
.kj_sort .list .left {float: left;padding-left: 13px;margin: 8px;}
.kj_sort .list .left a.current{color: #f00;}

.datachart{}
.datachart .selectbox {background: url(../../static/images/static/bg_tb_02.gif);height: 38px;line-height: 38px;padding: 0px 15px;border: 1px solid #ddd;height: 100%;margin-bottom: 10px;overflow: hidden;}
.datachart .selectbox .lable{width: 150px;float: left;}
.datachart .selectbox .select{width: 800px;float: left;}
.datachart .datalistbox{margin-bottom: 10px;}
.datachart .datalistbox .title{background-color: #ddd;}
.datachart .datalistbox table{width: 100%;    border: 1px solid #ccc;background: #fff;font-family: Arial;color: #464646;}
.datachart .datalistbox tr {background: #F3F2F2;}
.datachart .datalistbox tr td{text-align: center;font-size: 10px;}
.wdh{width: 19px;}


.redball .ball{color: #d2b0b0;font-weight: 200;display: block;margin: 0 1px;text-align: center;border-radius:50%;font-size: 12px;height: 18px;line-height: 18px;}
.blueball .ball{color: #8ed9fc;font-weight: 200;display: block;margin: 0 1px;text-align: center;border-radius:50%;font-size: 12px;height: 18px;line-height: 18px;}
.orangeball .ball{color: #E2B46F;font-weight: 200;display: block;margin: 0 1px;text-align: center;border-radius:50%;font-size: 12px;height: 18px;line-height: 18px;}
.redHighlight .ball{background-color: #BD5151;color: #fff;}
.blueHighlight .ball{background-color: #1C74AA;color: #fff;}
.orangeHighlight .ball{background-color: #E2B46F;color: #fff;}
.cqssc .ball{width: 11px;margin: 0;}
.gd115 .blueHighlight .ball{width: 20px;height: 20px;margin: 5px auto;}
.gd115 tr th{ border-color: #ddd; border-style: solid;border-width: 0 1px 1px 0;}
.gd115 tr td{ border-color: #ddd; border-style: solid;border-width: 0 1px 1px 0;}


.chartIntro {border: 1px solid #ccc;background: #f5f5f5;padding: 10px;margin-top: 10px;line-height: 22px;margin-bottom: 10px;}
.dataTable thead th {background-color: #f0e5c6;font-weight: 200;}
.dataTable tr th.bd {width: 1px;background-color: #dbdbdb;font-size: 0;}

.lu28table{border: 1px solid #E9EEF0;}
.lu28table td {border-right: 1px solid #E9EEF0;border-bottom: 1px solid #E9EEF0; text-align: center;}
.lu28table td .bg-orange{width: 18px;height: 18px;line-height:18px; display: block;color: #fff;margin: 0 auto;border-radius:9px;}
.lu28table th.num{width: 23px;}

	.head-box {background: url(../../static/images/b-top.gif) left -166px repeat-x;height: 88px;position: relative;}
	.head-box .logo {width: 110px;margin-right: 10px;text-align: center;float: left;margin-top: 5px;}
	.head-box .logo img {width: 72px;margin: 0 auto 5px;}
	.head-box .info {flex-grow: 1;width: 500px;float: left;margin-top: 10px;position: absolute;bottom: 0px;left: 120px;}
	.head-box .info .project-period {width: 107px;line-height: 24px;height: 26px;text-align: center;background: url(../../static/images/b-sprit.png) 0 -58px no-repeat;margin: 0 10px 10px;font-weight: bold;display: inline-block;}
	.project-lottery {color: #999;margin-bottom: 15px;font-size: 12px;}
	.project-selling {display: inline-block;width: 50px;height: 13px;background: url(../../static/images/b-sprit.png) 0 -127px no-repeat;margin-bottom: 0px;}

	.info .tab a.current {color: #ba2636;border-top: 2px solid #ba2636;margin-top: 0;background: none;}
	.info .tab a:first-child {border-left-width: 1px;}
	.info .tab a {display: inline-block;float: left;width: 114px;line-height: 32px;text-align: center;border-width: 1px 1px 0 0;border-style: solid;border-color: #eee;background: white;margin-bottom: 4px;margin-top: 1px;color: #333;}
	.project-countdown {line-height: 23px;text-align: right;}
	.project-countdown .countdown {display: inline-block;width: 151px;margin-right: 20px; background: url(../../static/images/top-tips.png) 0 -67px no-repeat;}
	.time{width: 300px;float: right;}
	.time .project-countdown{margin-top: 22px;}
	.time .project-countdown .countdown span {height: 24px;}
	.time .project-countdown-hfl {height: 67px;overflow: hidden;position: relative;width: 394px;background: url(../../static/images/top-tips.png) 0 0 no-repeat;}
	.time .b-top-tips-cur {float: left;padding-left: 16px;padding-top: 17px;width: 120px;}
	.time .b-top-tips-time {float: left;padding-left: 16px; padding-top: 10px;}
	.time .b-top-tips-time strong {color: #ba2636;font: bold 40px Geneva,Helvetica,Tahoma,Arial;}
	.time .zoushi{text-align: right;}
	.time .ma10{padding: 10px 20px;}

	.project-countdown .countdown span {display: inline-block;width: 50px;height: 23px;text-align: center;font-weight: bold;}
	.project-countdown .countdown span em {color: red;}
	.flexbox {display: flex;}

	.leftbox{width: 738px;border-right: 1px solid #ddd;float: left;margin-bottom: 10px;}
	.select-area { }
	.level1 {border-bottom: 1px solid #ccc;background: #f5f5f5;}
	.level1 a.tab{display: inline-block;}
	.level1 .tab {width: 82px;line-height: 32px;text-align: center;border-right: 1px solid #ccc;color: #333;}
	.level1 .tab p {line-height: 1.0em;margin: 0 0 7px 0;color: #717171;}
	.level1 .tab:first-child {border-left: 1px solid #ccc;}
	.level1 .tab.current {background: #ba2636;color: white;}
	.level1 .tab.current p {color: white;}
	.level2 {border-bottom: 1px solid #ddd;margin: 0;line-height: 40px;}
	.select-area .select-mode {padding: 20px 3px 10px;}
	.select-area .select-mode .red-balls {flex: 0 0 420px;margin: 0 25px;width: 420px;float: left;}
	.select-area .select-mode .blue-balls {flex: 0 0 245px;flex-wrap: wrap;width: 245px;float: right;}
	.select-area .red-balls .text {color: #D13B00;background: url(../../static/images/ssq_red.png) 0 11px repeat-x;text-align: center; margin-bottom: 10px;}
	.select-area .red-balls .text strong {background: white;padding: 0 5px;}
	.select-area .red-balls .text span {padding: 0 3px;background: white;font-size: 11px;}
	.select-area .red-balls .ball.selected {background: #e60000;border-color: #e60000;color: white;}
	.select-area .blue-balls .balls .ball.selected {border-color: #3e8be7;background: #3e8be7;color: white;}
	.select-area .select-mode .red-balls .balls {flex-wrap: wrap;}
	.select-area .select-mode .balls > div {float:left;margin-right: 5px;text-align: center;width: 32px;}
	.select-area .select-mode .ball { width: 32px;height: 32px;line-height: 30px;border: 1px solid #ddd;border-radius: 16px;background: #fcfcfc;font-size: 16px;color: #333;}
	.select-area .select-mode .balls span {display: block;line-height: 32px;color: #B1B1B1;font-family: Arial,Helvetica,sans-serif;}
	.select-area .blue-balls .text { color: #086CAE;background: url(../../static/images/ssq_blue.png) 0 11px repeat-x;text-align: center;margin-bottom: 10px;}
	.select-area .blue-balls .text strong {font-size: 14px;background: white;padding: 0 5px;}
	.select-area .blue-balls .text span {padding: 0 3px;background: white;}
	.select-area .buttons { text-align: center;margin: 10px 0;}
	.select-area .buttons a {width: 140px;line-height: 35px;background: #f5f5f5;text-align: center;border: 1px solid #dedede; text-decoration: none;cursor: pointer;color: #666;display: inline-block;outline: none;}
	.select-area .buttons a * {vertical-align: middle;}
	.select-area .buttons a img { margin-left: 5px;}
	.select-area .input-mode{display: none;text-align: center;}
	.select-area .input-mode p em {color: red;font-style: normal;}
	.select-area .input-mode textarea {border: 1px solid #7E9DB9;width: 475px;height: 95px; margin: 10px;padding: 3px 5px;font-size: 14px;line-height: 22px;font-family: Arial,Helvetica,sans-serif;}
	.select-area .input-mode .tips{margin: 10px auto;}
	.select-mode .tips{margin:0 0 20px 20px;}
	.p3-mode{overflow: hidden;}
	.p3-mode > div { margin-right: 9px;float: left;}
	.p3-mode .lable{width: 68px;}
	.p3-mode .gs {line-height: 32px;padding: 0 10px;color: #333;display: block;text-align: center;}
	.p3-mode span {display: block;line-height: 32px;text-align: center;color: gray;}
	.p3-mode .square {line-height: 24px;width: 24px;text-align: center;height: 24px;margin: 4px 0; border: 1px solid #ddd;font-weight: bold;display: block;}
	.select-area .ball.selected {background: #e60000;border-color: #e60000; color: white;}
</style>
